<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8"/>
		<title>CSDN首页</title>
		<style type="text/css">
			/* 公共样式 */
			div,ul,li,img{margin: 0px;padding: 0px;}
			ul{list-style: none}
			/* 页头样式 */
			div div.head{width:100%;height:40px;/*border:thin solid red;*/}
			div div.head img{float:left;margin-right:12px;}
			div div.head ul li{float: left;margin: 5px;}
			div div.head img.csdn{margin-left:150px;}
			div div.head ul img.headortrait{margin-top:5px;margin-left:6px;margin-right:80px;float:right;border-radius: 50px;}
			div div.head ul li.r1{float:right;margin: 5px;}
			div div.head ul img.ir1{margin-top:8px;margin-left:6px;float:right;}
			div div.head ul li.r2{float:right;margin: 5px;}
			div div.head ul img.ir2{margin-top:10px;margin-left:6px;float:right;}
			div div.head ul li a{
				color:#1f1f1f;font-size:14px;
				text-decoration: none;
				line-height: 30px;
				display: block;
			}
			div div.head ul li a:hover{color:#ff0000;}
			div .head input{height:20px;border-radius: 6px;float:right;margin-top:2px;padding: 2px}

			/* 页头导航栏样式 */
			div div.head_Navigation_bar{width:100%;height:40px;background:#e4e9ec;margin-bottom:8px;}
			div div.head_Navigation_bar img.edu{margin-left: 150px;}
			div div.head_Navigation_bar img{float:left;margin-right:20px;}
			div div.head_Navigation_bar ul li{float:left;margin: 5px;}
			div div.head_Navigation_bar ul li a{
				color:#1f1f1f;
				font-size:14px;
				text-decoration: none;
				line-height: 30px;
				display: block;
			}
			div div.head_Navigation_bar ul li.rt{float:right; margin-right: 90px;margin-left: -17px;}
			div div.head_Navigation_bar ul img.ri{float:right;margin-top: 6px;}
			div div.head_Navigation_bar ul li a:hover{color:#ff0000;}

			/* 内容块样式 */
			div div.main{width: 99%;height:700px;/*border: thin solid green;*/margin:2px auto;}
			/* 内容块左侧导航栏1 */
			div div.main .left_bar1{float:left;margin-left:150px;}
			div div.main .left_bar1 ul{
				background: #f9f9f9;
				border: 1px solid #eee;
			}
			div div.main .left_bar1 ul li{
				width:165px;
				height:54px;
				display: block;
				border:1px solid #eee;
				text-align: left;
				line-height: 54px;}
			div div.main .left_bar1 ul.student li.title{
				font-size:16px;
				border-bottom: 1px solid #eee;
				text-align: left;
				text-indent:20px;
				}
			div div.main .left_bar1 ul.student img{float: left;margin-left: 20px;margin-right:5px;margin-top: 19px;}
			div div.main .left_bar1 ul li a{text-decoration: none;color:#1f1f1f;}
			div div.main .left_bar1 ul li a:hover{color:#ff0000;}
			div div.main .left_bar1 ul.member_rights{display: block;margin-top: 20px;}
			div div.main .left_bar1 ul.member_rights img{float: left; margin-right:8px;margin-top: 17px;}
			div div.main .left_bar1 ul.member_rights li{font-size:12px;margin-left: 8px;}
			/* 主区域内容块 */
			div div.main .content{padding-left: 25px;overflow:hidden;margin-right:150px;/*border:thin solid red;*/}
			div div.main .content ul.mysource_topnav{
				display: block;
				width:100%;
				border-bottom: 1px solid #e2e2e2;
				margin-bottom: 15px;/* 这条线没显示出来很奇怪 */
			}
			div div.main .content ul.mysource_topnav li{
				display: inline-block;
				width:80px;
				height:45px;
				line-height: 45px;
				text-align: center;
				position:relative;
				float:left;
				margin:0 15px;}
			div div.main .content ul.mysource_topnav li a{color:#1f1f1f;text-decoration: none;}
			div div.main .content ul.mysource_topnav li a:hover{color:red;}
			div div.main .content ul.mysource_topnav li a:link{color:#333;}
			div div.main .content ul.mysource_topnav li.active:after{
				content:"";
				display:block;
				width:100%;
				height:0;
				margin: 0 auto;
				position:absolute;
				bottom:-1px;
				border-bottom: 2px solid #ca0c16;
			}
			div div.main .content .clear{clear:both;}
			div div.main .content ul.mysource_filter{
				width:100%;
				background: #ededed;
				overflow:hidden;
				border-radius:3px;
				margin-top: 8px;
			}
			div div.main .content ul.mysource_filter li{
				display:inline-block;
				min-width:76px;
				padding: 0 10px;
				height:35px;
				line-height: 35px;
				text-align: center;
				position:relative;}
			div div.main .content ul.mysource_filter li a{color:#1f1f1f;text-decoration: none;}
			div div.main .content ul.mysource_filter li a:hover{color:red;}
			div div.main .content ul.mysource_list{position: relative;}
			div div.main .content ul.mysource_list .item_box{
				padding-right:20px 0 20px 10px;
				position: relative;
				border-bottom: 1px solid #e2e2e2;
			}
			div div.main .content ul.mysource_list .item_box .item_right{
				float:right;
				width:200px;
				height:120px;
				text-align: right;
				padding-right:10px;
				position: relative;
			}
			div div.main .content ul.mysource_list .item_box .item_right .action{
				position:absolute;
				width:100%;
				text-align: right;
				bottom:0;
				padding-right:10px;
			}
			div div.main .content ul.mysource_list .item_box .item_right .action a.btn_red{
				border-radius: 4px;
				color:#fff;
				background:#f00;
				display:inline-block;
				font-size:14px;
				height:30px;
				line-height: 30px;
				text-align: center;
				text-decoration: none;
				padding:0 20px;
				vertical-align: middle;
			}

			div div.main .content ul.mysource_list .item_box .item_left{
				width:178px;
				height:121px;
				overflow: hidden;
				float:left;
				position:relative;
				z-index:5;
			}
			div div.main .content ul.mysource_list .item_box .item_main{
				margin-left: 188px;margin-right: 210px;padding: 0 10px;
			}
			div div.main .content ul.mysource_list .item_box .item_main h1{
				font-size:18px;
				line-height: 30px;
				overflow:hidden;
				white-space:nowrap;
				text-overflow: ellipsis;
				color:#333;
			}
			div div.main .content ul.mysource_list .item_box .item_main p{
				line-height: 30px;
				color:#666;
			}

			div div.main .content ul.mysource_list .item_box .item_main .studyprogress .progssbar{
				display: inline-block;
				width:150px;
				margin: 0 5px;
			}
			div div.main .content ul.mysource_list .item_box .item_main .studyprogress .progssbar .load-bar{
				background-color:#e8e8e8;
				border-radius: 10px;
				box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 3px rgba(0,0,0,.2) inset;
				height: 4px;
				position: relative;
				width: 100%;
			}
			div div.main .content ul.mysource_list .item_box .clearfix:before{
				display:table;
				content:" ";
			}
			div div.main .content ul.mysource_list .item_box .clearfix:after{
				display:table;
				content:".";
				visibility: hidden;
				clear:both;
				zoom:1;
			}

		</style>
	</head>
	<body>
		<div>
			<!-- 页头 - 开始 -->
			<div class="head">
				<img class="csdn" src="./images/csdn_logo.png"/>
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">博客</a></li>
					<li><a href="#">学院</a></li>
					<li><a href="#">下载</a></li>
					<li><a href="#">图文课</a></li>
					<li><a href="#">论坛</a></li>
					<li><a href="#">APP</a></li>
					<li><a href="#">问答</a></li>
					<li><a href="#">商城</a></li>
					<li><a href="#">VIP会员</a></li>
					<li><a href="#">活动</a></li>
					<li><a href="#">招聘</a></li>
					<li><a href="#">ITeye</a></li>
					<li><a href="#">GitChat</a></li>
				</ul>
				<ul>
					<img class="headortrait" src="./images/hat.jpg"/>
					<li class="r1"><a href="#">消息</a></li>
					<img class="ir1" src="./images/email.jpg"/>
					<li class="r2"><a href="#">写博客</a></li>
					<img class="ir2" src="./images/loockBlog .jpg"/>
				</ul>
				<input type="text" name="search" placeholder="搜索学院课程" />
			</div>
			<!-- 页头 - 结束 -->
				
			<!-- 标题栏 - 开始 -->
			<div class="head_Navigation_bar">
				<img class="edu" src="./images/EDU.jpg"/>
				<ul>
					<li><a href="#">视频课</a></li>
					<li><a href="#">讲师</a></li>
					<li><a href="#">直播</a></li>
					<li><a href="#">每日秒杀</a></li>
					<li><a href="#">会员</a></li>
					<li><a href="#">会员免费</a></li>
					<li><a href="#">4月限免</a></li>
					<li><a href="#">TinyMind</a></li>
					<li><a href="#">企业开户</a></li>
					<li><a href="#">课程服务</a></li>
					<li><a href="#">我要开课</a></li>
				</ul>
				<ul>
					<li class="rt"><a href="#">我的学院</a></li>
					<img class="ri" src="./images/hat.jpg"/>
				</ul>
			</div>
			<!-- 标题栏 - 结束 -->

			<!-- 中间内容区块 - 开始 -->
			<div class="main">
				<!-- 左侧导航栏1 - 开始 -->
				<div class="left_bar1">
					<ul class="student">
						<li class="title"><a href="#">我是学员</a></li>
						<img src="./images/kecheng.png"/>
						<li><a href="#">我的课程</a></li>
						<img src="./images/huiyuan.jpg"/>
						<li><a href="#">我的会员</a></li>
						<img src="./images/qianbao.jpg"/>
						<li><a href="#">我的红包</a></li>
						<img src="./images/tiwen.jpg"/>
						<li><a href="#">我的提问</a></li>
						<img src="./images/dingdan.jpg"/>
						<li><a href="#">我的订单</a></li>
						<img src="./images/youhui.jpg"/>
						<li><a href="#">优惠券</a></li>
						<img src="./images/jiangshi.jpg"/>
						<li><a href="#">讲师卡</a></li>
					</ul>
					<ul class="member_rights">
						<li>会员特权</li>
						<img src="./images/mei1.jpg"/>
						<li>千门专享课程免费看</li>
						<img src="./images/mei2.jpg"/>
						<li>精品课程每月免费兑</li>
						<img src="./images/mei3.jpg"/>
						<li>购课低至9折</li>
						<img src="./images/mei4.jpg"/>
						<li>600次下载特权</li>
						<img src="./images/mei5.jpg"/>
						<li>专享讲师社群答疑</li>
					</ul>
				</div>
				<!-- 左侧导航栏1 - 结束 -->

				<!-- 右侧内容栏 - 开始 -->
				<div class="content">
					<ul class="mysource_topnav">
						<li class="active"><a href="#">已购课程</a></li>
						<li><a href="#">最近播放的</a></li>
						<li><a href="#">收藏的课程</a></li>
						<li><a href="#">活动课程</a></li>
					</ul>
					<div class="clear"></div>
					<ul class="mysource_filter">
						<li class="first">类型</li>
						<li class="active"><a href="#">全部</a></li>
						<li><a href="#">课程</a></li>
						<li><a href="#">套餐</a></li>
						<li><a href="#">直播</a></li>
						<li><a href="#">教学中心</a></li>
						<li><a href="#">已领取课程</a></li>
						<li><a href="#">待分享</a></li>
					</ul>
					<ul class="mysource_list">
						<li class="item_box">
							<div class="item_right">
								<div class="info"></div>
								<div class="action">
									<a href="#" class="btn_red">继续学习</a>
								</div>
							</div>
							<div class="item_left">
								<a href="#" class="f1">
									<img src="./images/tup1.jpg"/>
								</a>
							</div>
							<div class="item_main">
								<h1>Python全栈工程师-第五周</h1>
								<p>课程时长:13课时/07小时54分25秒</p>
								<div class="studyprogress">
									学习进度&nbsp;:&nbsp;
									<div class="progssbar">
										<div class="load-bar">
											<div style="width:100%" class="load-bar-inner">
												<span></span>
											</div>
										</div>
									</div>
									<span class="pinfo">0/13</span>
								</div>
							</div>
							<div class="clearfix"></div>
						</li>
						<li class="item_box">
							<div class="item_right">
								<div class="info"></div>
								<div class="action">
									<a href="#" class="btn_red">继续学习</a>
								</div>
							</div>
							<div class="item_left">
								<a href="#" class="f1">
									<img src="./images/tup1.jpg"/>
								</a>
							</div>
							<div class="item_main">
								<h1>Python全栈工程师-第4周</h1>
								<p>课程时长:10课时/06小时38分08秒</p>
								<div class="studyprogress">
									学习进度&nbsp;:&nbsp;
									<div class="progssbar">
										<div class="load-bar">
											<div style="width:100%" class="load-bar-inner">
												<span></span>
											</div>
										</div>
									</div>
									<span class="pinfo">0/10</span>
								</div>
							</div>
							<div class="clearfix"></div>
						</li>
					</ul>
					<div></div>
					<div></div>
				</div>
				<!-- 右侧内容栏 - 结束 -->

				<!-- 页脚页码栏 - 开始 -->
				<div>
				</div class="pagenumber">
				<!-- 页脚页码栏 - 结束 -->
			</div>
			<!-- 中间内容区块 - 结束 -->

			<!-- 页脚信息 -->
			<div>
			</div>


		</div>
	</body>
</html>